import React, { useState, useEffect } from 'react';
import {
  Layout,
  Menu,
  Button,
  Card,
  Avatar,
  Breadcrumb,
  Statistic,
  Table
} from 'antd';
import {
  UserOutlined,
  LogoutOutlined,
  DashboardOutlined,
  TeamOutlined,
  TrophyOutlined,
  SettingOutlined,
  AppstoreOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons';
import '../css/adminPage.css';

const { Header, Sider, Content } = Layout;

const AdminPage: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [selectedMenu, setSelectedMenu] = useState('dashboard');
  const [currentUser, setCurrentUser] = useState<any>(null);
  console.log(currentUser);

  useEffect(() => {
    // 从 localStorage 获取用户信息
    const userInfo = localStorage.getItem('userInfo');
    if (userInfo) {
      setCurrentUser(JSON.parse(userInfo));
    }
  }, []);

  const handleLogout = () => {
    localStorage.removeItem('userInfo');
    localStorage.removeItem('token');
    window.location.href = '/';
  };

  const menuItems = [
    {
      key: 'dashboard',
      icon: <DashboardOutlined />,
      label: '仪表盘'
    },
    {
      key: 'students',
      icon: <TeamOutlined />,
      label: '学生管理'
    },
    {
      key: 'points',
      icon: <TrophyOutlined />,
      label: '学分管理'
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '系统设置'
    }
  ];

  const renderContent = () => {
    switch (selectedMenu) {
      case 'dashboard':
        return (
          <>
            <Card className="welcome-card">
              <h2>欢迎回来，{currentUser?.username || '管理员'}！</h2>
              <p>今天是 {new Date().toLocaleDateString('zh-CN')}，祝您工作愉快！</p>
            </Card>
            <div className="stats-cards">
              <Card className="stat-card">
                <Statistic
                  title="总学生数"
                  value={2500}
                  prefix={<TeamOutlined />}
                />
              </Card>
              <Card className="stat-card">
                <Statistic
                  title="今日登录"
                  value={156}
                  prefix={<UserOutlined />}
                />
              </Card>
              <Card className="stat-card">
                <Statistic
                  title="总发放学分"
                  value={25600}
                  prefix={<TrophyOutlined />}
                />
              </Card>
            </div>
          </>
        );
      case 'students':
        return (
          <Card className="table-card">
            <Table
              columns={[
                { title: '学号', dataIndex: 'id', key: 'id' },
                { title: '姓名', dataIndex: 'name', key: 'name' },
                { title: '班级', dataIndex: 'class', key: 'class' },
                { title: '总学分', dataIndex: 'points', key: 'points' }
              ]}
              dataSource={[]}
            />
          </Card>
        );
      default:
        return <Card>功能开发中...</Card>;
    }
  };

  return (
    <Layout className="admin-layout">
      <Header className="admin-header">
        <div className="admin-logo">
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{ color: 'white', marginRight: '8px' }}
          />
          <AppstoreOutlined />
          <span>校园学分管理系统</span>
        </div>
        <div className="admin-header-right">
          <Avatar icon={<UserOutlined />} />
          <span>{currentUser?.username || '管理员'}</span>
          <Button 
            type="link" 
            icon={<LogoutOutlined />}
            onClick={handleLogout}
          >
            退出登录
          </Button>
        </div>
      </Header>
      <Layout>
        <Sider
          className="admin-sider"
          collapsible
          collapsed={collapsed}
          onCollapse={setCollapsed}
          width={200}
          breakpoint="lg"
          theme="light"
          trigger={null}
        >
          <Menu
            mode="inline"
            className="admin-menu"
            selectedKeys={[selectedMenu]}
            items={menuItems}
            onClick={({ key }) => setSelectedMenu(key)}
          />
        </Sider>
        <Layout className={`admin-main-layout ${collapsed ? 'collapsed' : ''}`}>
          <Content className="admin-content">
            <Breadcrumb className="admin-breadcrumb">
              <Breadcrumb.Item>首页</Breadcrumb.Item>
              <Breadcrumb.Item>
                {menuItems.find(item => item.key === selectedMenu)?.label}
              </Breadcrumb.Item>
            </Breadcrumb>
            {renderContent()}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default AdminPage; 